<template>
    <div class="picture">
        <img src="../assets/88Y~8ZLO29W]7[@LV{W70O0.png" alt="">
        <h2>你当前点击的是 {{ msg }}</h2>
        <div v-for="(item,index) in list" :key="item.id" @click="changeIdData(index)">
            <img :src="item.imgUrl" alt="">
            <span>
                {{item.text}}
            </span>
            <span>
                {{item.price | newPrice}}
            </span>
        </div>
    </div>
</template>

<script>
export default {
    name: "centerCpn",
    data(){
        return {
        list:[
        {
          id:1,
          name:'小米11 Ultra',
          imgUrl:require("../assets/7f5fab059643521e41406131379c7b4a.jpg"),
          text:"小米11 Ultra，开启影像新时代",
          price:5999
        },
        {
          id:2,
          name:'插座',
          imgUrl:require("../assets/7f5fab059643521e41406131379c7b4a.jpg"),
          text:"智能定时 | 用电统计 | 过载保护",
          price:49
        },
        {
          id:3,
          name:'音箱',
          imgUrl:require("../assets/7f5fab059643521e41406131379c7b4a.jpg"),
          text:"小身材也有大智慧",
          price:49
        },
        {
          id:4,
          name:'Redmi Note 9',
          imgUrl:require("../assets/7f5fab059643521e41406131379c7b4a.jpg"),
          text:"Redmi Note 9 4G,6000mAh大电量",
          price:999
        },
        {
          id:5,
          name:'剃须刀',
          imgUrl:require("../assets/7f5fab059643521e41406131379c7b4a.jpg"),
          text:"青年“无须”新选择",
          price:99
        },
        {
          id:6,
          name:'手环',
          imgUrl:require("../assets/7f5fab059643521e41406131379c7b4a.jpg"),
          text:"全面屏更多可能",
          price:299
        },
        {
          id:7,
          name:'5号彩虹电池',
          imgUrl:require("../assets/7f5fab059643521e41406131379c7b4a.jpg"),
          text:"5号彩虹电池（10粒)，无汞无镉安",
          price:9.9
        },
        {
          id:8,
          name:'插线板5孔位',
          imgUrl:require("../assets/7f5fab059643521e41406131379c7b4a.jpg"),
          text:"小米插线板5孔位,过载断电保护独立安",
          price:39
        },
        {
          id:9,
          name:'耳机',
          imgUrl:require("../assets/7f5fab059643521e41406131379c7b4a.jpg"),
          text:"支持蓝牙5.0，自动秒连，拿起就能用",
          price:99
        },
        {
          id:10,
          name:'笔',
          imgUrl:require("../assets/7f5fab059643521e41406131379c7b4a.jpg"),
          text:"简约设计，丝滑书写",
          price:24.9
        }
      ],
      msg:null
    }
  },
  filters:{
    newPrice(val){
      return '¥' + val.toFixed(2)
    }
  },
  methods:{
    changeIdData(i){
      this.msg = this.list[i].name

    }
  }
}
</script>

<style scoped lang="scss">
    .picture{
        img{
            width: 100%;
        }
        h2{
            text-align: center;
        }
    }
</style>